<template>
	<view class="pos-rel mt-40" v-if="tgyInfo">
		<view class="pl-24">
			<view class="space-between flex-a mt-20 pr-24">
				<view class="flex-a">
					<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
					<view class="ml-16">
						<view class="fs-32 font-bold flex-a">
							<text>{{ tgyInfo.name }}</text>
							<image :src="imgBaseUrl + 'arrow-right.png'" class="icon-20 ml-8" />
						</view>
						<view class="level">
							<image :src="imgBaseUrl + 'level-bronze.png'" class="icon-36" />
							<text>{{ tgyInfo.level_name }}</text>
						</view>
					</view>
				</view>
				<view class="qrcode-wrap">
					<image :src="imgBaseUrl + 'icon-qrcode.png'" class="icon-40" />
				</view>
			</view>
			<view class="income-wrap">
				<view class="c-grey-86 flex-a">
					<text class="c-withdraw-title">可提现金额</text>
					<zjy-desensitization color="brown" />
				</view>
				<view class="space-between flex-a mt-8">
					<view class="flex-a">
						<text class="fs-40 mr-40 font-bold font-oppo c-withdraw-value">
							{{ formatAmount(tgyInfo.balance_in_cent) }}
						</text>
						<zjy-button size="small" @click="navigateTo('/pages/promotion/withdraw')">提现</zjy-button>
					</view>
					<view class="c-black-_7">
						<text>提现记录</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<up-line color="#F1F0E8" margin="32rpx 16rpx 32rpx 0" />
				<view class="status-content">
					<view class="status-item">
						<view class="title">待入账</view>
						<view class="value">{{ formatAmount(tgyInfo.unsettle_in_cent) }}</view>
					</view>
					<view class="status-item">
						<view class="title">提现中</view>
						<view class="value">{{ formatAmount(tgyInfo.cashing_in_cent) }}</view>
					</view>
					<view class="status-item">
						<view class="title">已提现</view>
						<view class="value">{{ formatAmount(tgyInfo.cashed_in_cent) }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="plr-24">
			<!--公告-->
			<view class="notice-wrap">
				<view class="flex-a">
					<view class="bd-right flex-a">
						<image :src="imgBaseUrl + 'icon-notice.png'" class="icon-32" />
						<image :src="imgBaseUrl + 'notice-text.png'" class="notice-text" />
					</view>
				</view>
				<swiper :circular="true" :autoplay="true" :vertical="true" class="notice-swiper">
					<swiper-item v-for="(item, index) in [1, 2]" :key="index">
						<view class="notice-item">
							<text class="c-black-1d ml-32 flex-1 text-ellipsis">
								系统将于晚间 12 点更新，请及时报备备份数据
							</text>
							<view class="notice-time">11-06</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 推广统计 -->
			<view class="mt-16 zjy-card-form">
				<view class="flex-a space-between">
					<view class="zjy-card-title">推广统计</view>
					<view class="flex-a c-grey-86 fs-26">
						<text>明细</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<view class="flex mt-24">
					<view class="block-corner">
						<view class="title">销售额</view>
						<view class="value">{{ formatAmount(tgyStatsInfo.order_amount_in_cent) }}</view>
						<image :src="imgBaseUrl + 'corner-sale.png'" class="icon" />
					</view>
					<view class="block-corner">
						<view class="title">预计佣金</view>
						<view class="value">{{ formatAmount(tgyStatsInfo.pre_rebate_in_cent) }}</view>
						<image :src="imgBaseUrl + 'corner-amount.png'" class="icon" />
					</view>
				</view>
				<view class="total-num space-between">
					<view class="num-item">
						<view class="title">订单</view>
						<view class="value">{{ formatAmount(tgyStatsInfo.order_count) }}</view>
					</view>
					<view class="num-item">
						<view class="title">客户</view>
						<view class="value">{{ formatAmount(tgyStatsInfo.member_count) }}</view>
					</view>
					<view class="num-item">
						<view class="title">邀请</view>
						<view class="value">{{ formatAmount(tgyStatsInfo.invite_count) }}</view>
					</view>
				</view>
			</view>
			<!-- 功能菜单 -->
			<view class="menu-funcs">
				<view
					v-for="(item, index) in funcs"
					:key="index"
					class="func-item"
					@click="navigateTo(item.linkPath || '')"
				>
					<image :src="imgBaseUrl + item.icon" class="icon-56" />
					<text class="label">{{ item.label }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { $getTgyInfo, $tgyOwnIncome } from "@/api/promotion"
import { navigateTo } from "@/utils/page-redirect"
import { formatAmount } from "@/utils/tools"

const imgBaseUrl = inject("imgBaseUrl")
const funcs = ref([
	{
		label: "分享店铺",
		icon: "promotion-func-shop.png",
	},
	{
		label: "推广商品",
		icon: "promotion-func-product.png",
		linkPath: "/pages/promotion/product/index",
	},
	{
		label: "邀请达人",
		icon: "promotion-func-product.png",
	},
	{
		label: "分销订单",
		icon: "promotion-func-distributor.png",
		linkPath: "/pages/promotion/order",
	},
	{
		label: "我的客户",
		icon: "promotion-func-distributor.png",
		linkPath: "/pages/promotion/customer",
	},
	{
		label: "我的团队",
		icon: "promotion-func-group.png",
	},
	{
		label: "达人课堂",
		icon: "promotion-func-lesson.png",
		linkPath: "/pages/feed/lesson/index",
	},
	{
		label: "素材中心",
		icon: "promotion-func-material.png",
		linkPath: "/pages/feed/material/index",
	},
])

const tgyInfo = ref()
const tgyStatsInfo = ref<any>({})
onMounted(async () => {
	tgyInfo.value = await $getTgyInfo()
	tgyStatsInfo.value = await $tgyOwnIncome()
})
</script>
<style lang="scss" scoped>
.level {
	margin-top: 4rpx;
	padding: 4rpx 10rpx 4rpx 4rpx;
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.5);
	font-size: 22rpx;
	color: $brown-bc;
	border: 1rpx solid $c-white;
	transform: rotate(360deg);
	border-radius: 8rpx 32rpx 32rpx 8rpx;
}
.qrcode-wrap {
	width: 64rpx;
	height: 64rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.c-withdraw-title {
	color: rgba(150, 86, 3, 0.7);
}
.c-withdraw-value {
	color: #965603;
}
.income-wrap {
	width: 100%;
	height: 372rpx;
	padding: 100rpx 48rpx 32rpx 40rpx;
	margin-top: -28rpx;
	background: url(#{$imgBaseUrl}promotion-bg.png);
	background-position: center center;
	background-size: cover;
	.status-content {
		display: flex;
		justify-content: space-between;
		.status-item {
			min-width: 150rpx;
			.title {
				color: $c-black-_4;
			}
			.value {
				margin-top: 8rpx;
				font-size: 28rpx;
				font-weight: bold;
				font-family: "OPPO";
			}
		}
	}
}
.notice-wrap {
	margin-top: 16rpx;
	padding: 24rpx;
	background: $c-white;
	border-radius: 16rpx;
	height: 84rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.notice-text {
		width: 50rpx;
		height: 24rpx;
		margin-left: 4rpx;
	}
	.notice-swiper {
		flex: 1;
		height: 100%;
		swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.notice-item {
			display: flex;
			align-items: center;
		}
		.notice-time {
			margin-left: 28rpx;
			color: $c-grey-86;
		}
	}
	.bd-right {
		position: relative;
		&::before {
			position: absolute;
			content: "";
			right: -16rpx;
			top: 6rpx;
			bottom: 6rpx;
			width: 2rpx;
			background: rgba(134, 144, 156, 0.3);
		}
	}
}
.block-corner {
	flex: 1;
	height: 136rpx;
	padding: 24rpx 32rpx 0 26rpx;
	background: rgba(237, 236, 228, 0.2);
	border-radius: 16rpx;
	position: relative;
	overflow: hidden;
	& + .block-corner {
		margin-left: 18rpx;
	}
	.title {
		font-size: 24rpx;
		color: $c-grey-86;
	}
	.value {
		font-size: 32rpx;
		font-weight: bold;
		font-family: "OPPO";
		margin-top: 8rpx;
	}
	image {
		position: absolute;
		width: 88rpx;
		height: 88rpx;
		right: 0;
		bottom: -12rpx;
	}
}
.total-num {
	background: #fbfbfa;
	padding: 26rpx 32rpx;
	display: flex;
	margin-top: 16rpx;
	.num-item {
		min-width: 120rpx;
		.title {
			color: $c-black-_4;
		}
		.value {
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 8rpx;
			font-family: "OPPO";
		}
	}
}
.menu-funcs {
	margin-top: 16rpx;
	padding-top: 40rpx;
	background: $c-white;
	border-radius: 16rpx;
	display: flex;
	flex-wrap: wrap;
	.func-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
		.label {
			margin-top: 16rpx;
			font-size: 24rpx;
		}
	}
}
</style>
